<template>
  <div>
    <div style="margin-bottom: 10px; font-size: 20px; font-weight: 700">
      标签名称
    </div>
    <el-input
      v-model="formDatas.tabName"
      placeholder="请输入标签名称"
    ></el-input>
    <div style="margin: 10px 0px; font-size: 20px; font-weight: 700">
      标签尺寸
    </div>
    <div
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <el-input-number
        v-model="formDatas.tabWidth"
        size="small"
        placeholder="宽度"
        controls-position="right"
        @change="updateImgScale"
        :min="1"
        :max="1000"
        :precision="0"
      />
      <el-input-number
        v-model="formDatas.tabHeight"
        size="small"
        placeholder="高度"
        controls-position="right"
        @change="updateImgScale"
        :min="1"
        :max="1000"
        :precision="0"
      />
    </div>
    <div
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 15px;
      "
    >
      <el-button type="primary" @click="handleDownLoadJson">导出JSON</el-button>
      <el-button type="primary" @click="handleDownLoadImage"
        >导出图片</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formDatas: {
        tabName: "",
        tabWidth: 100,
        tabHeight: 100,
      },
    };
  },
  methods: {
    // 尺寸变化
    updateImgScale() {},
    // 点击了图片
    txtNameChange(txt) {
      this.formDatas.tabName = txt;
    },
    // 点击导出Json
    handleDownLoadJson() {
      this.$emit("jsonChange");
    },
    // 点击导出图片
    handleDownLoadImage() {
      this.$emit("imgChange");
    },
  },
};
</script>

<style scoped lang="scss"></style>
